<template>
  <!--Dialog-->
  <Dialog v-model="modelValue">
    <el-form :inline="true" label-width="auto">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称">
            {{ detailForm.name }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="onClose">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getAsync } from '@/utils/api/tenant/index';
import { Dialog } from '@/components/dialog/index';
import { propTypes } from '@/utils/propTypes';
import { ref, onMounted } from 'vue';
import type { TenantDto } from '@/utils/api/tenant/type';

// id
const props = defineProps({
  id: propTypes.string
});

// 组件挂载完成
onMounted(async () => {
  const user = await getAsync(props.id);
  detailForm.value = user;
});

// 控制组件隐藏与显示
const modelValue = defineModel<boolean>(propTypes.bool.def(false));
const close = () => {
  modelValue.value = false;
};

// 关闭
const onClose = () => {
  //触发自定义事件
  close();
};

// 修改对象
const detailForm = ref<TenantDto>({
  name: '',
  id: ''
});
</script>
<style scoped lang="scss"></style>
